<div class="content">
    <div id="example_title">
        <h1>Search Nodes</h1>
        The example below shows how to search nodes in the sidebar.
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<div id="sidebar" style="height: 600px; width: 200px; float: left"></div>
<div style="margin-left: 220px;">
    <button class="w2ui-btn" onclick="action('collapseAll')">Collapse All</button>
    <button class="w2ui-btn" onclick="action('expandAll')">Expand All</button>
</div>
<div style="clear: both"/>

<!--CODE-->
<script type="module">
import { w2sidebar, w2utils, query } from '__W2UI_PATH__'

let sb = new w2sidebar({
    box: '#sidebar',
    name: 'sidebar',
    levelPadding: 22,
    nodes: [],
    topHTML: `
        <div style="height: 36px; padding: 3px 2px; border-bottom: 1px solid silver">
            <input id="search" style="width: 100%" class="w2ui-input" placeholder="Search nodes..."
                onchange="search(this.value)">
        </div>
    `,
    onClick(event) {
        console.log('click', event.detail)
    },
    async onRefresh(event) {
        await event.complete
        if (event.detail.fullRefresh) {
            if (query('#search').length > 0) {
                query('#search').val(sb.last_search ?? '').get(0).focus()
            }
        }
    }
})

window.action = function(method) {
    sb[method]()
}

window.search = function(value) {
    sb.last_search = value
    let count = sb.search(value)
    sb.expandAll()
    query(sb.box).find('#empty-search').remove()
    if (count == 0) {
        query(sb.box)
            .append('<div id="empty-search" style="font-size: 13px; color: #666; z-index: 1400; top: 45%; left: 50%; transform: translateX(-50%); width: 100%!important; text-align: center">No nodes found</div>')
        w2utils.marker(sb.box)
    } else {
        let words = []
        if (value !== '') words.push(value)
        w2utils.marker(sb.box, words)
    }
}

window.generate = function(nodes, id, options, count, subCount) {
    let icons = ['fa fa-home', 'fa fa-coffee', 'fa fa-comment-o', 'fa fa-star', 'fa fa-bug']
    let texts = ['Test', 'Label', 'Item', 'Simple', 'Formula', 'Single']
    for (let i=0; i<count; i++) {
        let node = w2utils.extend({
            id: id + '-' + i,
            expanded: false,
            text: texts[Math.floor(Math.random() * texts.length)],
            icon: icons[Math.floor(Math.random() * icons.length)],
            nodes: []
        }, options)
        if (subCount > 0) {
            generate(node.nodes, id + '-' + i, {}, Math.floor(Math.random() * subCount) + 2)
        }
        nodes.push(node)
    }
}

window.generate(sb.nodes, 'item', { icon: 'fa fa-folder-o' }, 5, 10)
window.generate(sb.nodes[0].nodes[1].nodes, 'sub', { expanded: false }, 3)
window.generate(sb.nodes[2].nodes[1].nodes, 'sb', { expanded: false }, 3)
sb.refresh()
</script>
